<script setup lang="ts">
import { ArrowRight, Expand, Grid } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import UserStore from "../../store/UserStore";
import createAxios from "../../request";
import { ElMessage } from 'element-plus';
// import { de } from 'element-plus/es/locales.mjs';
let currentDate = new Date();
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1; // 月份是从0开始的
let date = currentDate.getDate();
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = ref(currentDate.getSeconds());
let store = UserStore();
let timeclear = function () {
    let currentDate = new Date();
    year = currentDate.getFullYear();
    month = currentDate.getMonth() + 1; // 月份是从0开始的
    date = currentDate.getDate();
    hours = currentDate.getHours();
    minutes = currentDate.getMinutes();
    seconds.value = currentDate.getSeconds();
}
// ======================================================
// 获取当前日期
const today = ref('');

onMounted(() => {
    today.value = getCurrentDate();
});

function getCurrentDate() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}
// ======================================================

let clockIn = () => {
    let axios = createAxios();
    axios({
        url: "/clockin",
        method: "POST",
        data: {
            date: today.value,
            clockIn_time: hours + ":" + minutes + ":" + seconds.value
        }
    }).then(res => {
        if (res.data == '1') {
            ElMessage.success("打卡成功");
        } else {
            ElMessage.error("打卡失败");
        }
    }).catch(err => {
        ElMessage.error("访问失败");
    })
}

const clockOut = () => {
    let axios = createAxios();
    axios({
        url: "/clockout",
        method: "POST",
        data: {
            date: today.value,
            clockOut_time: hours + ":" + minutes + ":" + seconds.value
        }
    }).then(res => {
        if (res.data == '1') {
            ElMessage.success("打卡成功");
        } else {
            ElMessage.error("打卡失败");
        }
    }).catch(err => {
        ElMessage.error("访问失败");
    })
}


onMounted(() => {
    setInterval(timeclear, 1000);
});
</script>
<template>
    <div class="head">查看个人信息</div>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/a' }">时间管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/a' }">考勤打卡</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="body">
        <div class="l1">
            <div class="title">当前服务器时间</div>
            <div class="time">
                <div class="timeblock">
                    <div>{{ year }}</div>
                    <div style="color: white;">年</div>
                </div>
                <div class="timeblock">
                    <div>{{ month }}</div>
                    <div style="color: white;">月</div>
                </div>
                <div class="timeblock">
                    <div>{{ date }}</div>
                    <div style="color: white;">日</div>
                </div>
                <div class="timeblock">
                    <div>{{ hours }}</div>
                    <div style="color: white;">时</div>
                </div>
                <div class="timeblock">
                    <div>{{ minutes }}</div>
                    <div style="color: white;">分</div>
                </div>
                <div class="timeblock">
                    <div>{{ seconds }}</div>
                    <div style="color: white;">秒</div>
                </div>
            </div>
        </div>
        <div class="l2">
            <div><input type="button" class="btn" @click="clockIn()" value="上班打卡"></div>
            <div><input type="button" class="btn" @click="clockOut()" value="下班打卡"></div>
            <div><input type="button" class="btn" @click="" value="补签"></div>
        </div>
        <div class="l3">
            <table>
                <thead>
                    <tr>
                        <th>打卡人</th>
                        <th>上班时间</th>
                        <th>下班时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ store.getAccount }}</td>
                        <td>08:30:01</td>
                        <td>--</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<style scoped>
th {
    background-color: #4FB5D3;
    color: white;
}

th,
td {
    width: 350px;
    /* height: 100px; */
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;

}

.l2 input[type=button] {
    background: #4FB5D3;
    color: #fff;
    font-weight: bold;
    width: 100%;
    height: 100%;
    font-size: 20px;
}

.l2 input[type=button]:hover {
    background: #fff;
    color: #4FB5D3;
}

.timeblock {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: rgb(104, 103, 103, 0.5);
    margin: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.timeblock div:not(:last-child) {
    font-size: 30px;
    color: white;
}

.time {
    display: flex;
    justify-content: center;
    /* padding: 50px; */
}

.title {
    text-align: center;
    padding-top: 20px;
    color: white;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 7px rgb(0 0 0 / 20%);
}

.l1 {
    width: 100%;
    background-image: url("../../img/backgrounds/1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: #777; */
    /* height: 215px; */
}

.l2 {
    width: 100%;
    /* background-color: #111; */
    height: 76px;
    display: flex;
    justify-content: center;
}

.l2 div {
    width: 310px;
    height: 46px;
    margin: 20px;
}

.l3 {
    width: 100%;
    /* background-color: #999; */
    height: 130px;
    display: flex;
    justify-content: center;
    padding: 10px;
}

table {
    padding-left: 40px;
}

table tr td {
    height: 40px;
    width: 150px;
}

.right {
    text-align: right;
}

#aaa {
    display: flex;
    height: 35px;
    margin-top: 20px;
}

.head {
    height: 30px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    font-size: 30px;
    padding: 25px;
    color: #000;
}

.bread {
    height: 30px;
    background-color: rgb(215, 215, 215);
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: bottom;
}

.body {
    width: 100%;
    /* height: 100%; */
    background-color: rgb(255, 255, 255);
    padding: 0;
}
</style>